<template>
	<view class="searchFixed row j-sa flex-column">
		<view class="search">
			<uni-easyinput class="test" prefixIcon="search" v-model="station_name" placeholder="关键词搜索  |  站点名称"
				confirmType="search" @confirm="getAlarmListFilter" @clear="getAlarmListFilter"></uni-easyinput>
		</view>
		<view class="filter row">
			<view class="filterItem row j-center a-center" style="width: 35%;">
				<uni-datetime-picker type="date" v-model="created_at" @change="getAlarmListFilter($event, 'time')" />
			</view>
			<view class="filterItem flex-1 row j-center a-center">
				<uni-data-select style="width: 100%;" v-model="alarm_level" placeholder="级别" :localdata="level_options"
					@change="getAlarmListFilter"></uni-data-select>
			</view>
			<view class="filterItem flex-1 row j-center a-center">
				<uni-data-select style="width: 100%;" v-model="status" placeholder="状态" :localdata="status_options"
					@change="getAlarmListFilter"></uni-data-select>
			</view>
			<view class="filterItem flex-1 row j-center a-center">
				<uni-data-select style="width: 100%;" v-model="breakdown" placeholder="故障" :localdata="hitch_options"
					@change="getAlarmListFilter"></uni-data-select>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="popup_content row flex-column j-sb">
				<view class="popupTitle">
					提示
				</view>
				<view class="popupText row a-center">
					<uni-icons type="info" size="30" color="#e6a23c"></uni-icons>是否确定为故障
				</view>
				<view class="popupBtn row j-sb">
					<button @click="handle" class="mini-btn"
						style="margin: 0;background-color: #fff;padding: 0; width: 100rpx;" size="mini">已处理</button>
					<button @click="handleBreakDown" class="mini-btn"
						style="margin: 0;padding: 0;background-color: #409eff;color: #fff; width: 100rpx;"
						size="mini">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
	<mescroll-body @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
		<view class="content" v-if="alarmList.length">
			<view class="alarmItem" v-for="(item,index) in alarmList" :key="index">
				<view class="itemTop row j-sb a-center">
					<view class="alarmName">
						<view class="name">
							{{item.event_name}}
						</view>
						<view class="time">
							{{item.created_at}}
						</view>
					</view>
					<view class="alarmStatus row j-center a-center"
						:class="{tishi: item.alarm_level === '提示',yiban: item.alarm_level === '一般',jinji: item.alarm_level === '紧急'}">
						{{item.alarm_level}}
					</view>
				</view>
				<view class="alarmDesc">
					<text style="color: #3665FF;" @click="goStationBoard(item.station_id)">【{{item.station_name}}】</text>{{item.event_desc}}
				</view>
				<view class="alarmHandle row j-sb a-center">
					<view class="handleTime">
						{{item.confirm_time}}
					</view>
					<view class="handle row a-center">
						<view class="handleName" v-if="item.status === '已处理'">
							已处理 - {{item.operator}}
						</view>
						<button v-if="item.breakdown === '否'" v-show="item.status !== '已处理'"
							class="handleBtn row j-center a-center" type="default" size="mini"
							@click="addBreak(item.id, item.station_id)">
							处理
						</button>
						<button @click="goDetail(item.breakdown_id)" v-else class="handleBtn1 row j-center a-center" style="background-color: #409eff;" size="mini">
							查看详情
						</button>
						<!-- <view v-if="item.breakdown === '否'" :disabled="item.status === '已处理'" class="handleBtn row j-center a-center">
							故障
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="content row j-center a-center" v-else>
			<image style="width: 260rpx;height: 260rpx;" src="../../static/index/noData.png" mode="">
			</image>
		</view>
	</mescroll-body>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { request } from '@/utils'
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const { mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom)
	const downOption = {
		auto: false //是否在初始化后,自动执行downCallback; 默认true
	}
	const station_name = ref('')
	const created_at = ref<any>('')
	const alarm_level = ref('')
	const level_options = ref([
		{ value: 4, text: "紧急" },
		{ value: 3, text: "重要" },
		{ value: 2, text: "一般" },
		{ value: 1, text: "提示" },
	])
	const status = ref('')
	const status_options = ref([
		{ value: 1, text: "已处理" },
		{ value: 0, text: "未处理" },
	])
	const breakdown = ref('')
	const hitch_options = ref([
		{ value: 1, text: "是" },
		{ value: 0, text: "否" },
	])
	const alarmList = ref<any>([])
	const page = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const getAlarmList = async () => {
		const res : any = await request('/api/v1/getAlarmList?permission=alarmList', {
			station_name: station_name.value,
			created_at: created_at.value,
			status: status.value,
			alarm_level: alarm_level.value,
			breakdown: breakdown.value,
			page: page.value,
			pageSize: pageSize.value
		}, 'GET')
		if (page.value == 1) alarmList.value = [];
		alarmList.value = alarmList.value.concat(res.data.data.data)
		total.value = res.data.data.total
	}
	/* 自定义下拉刷新的回调,不使用useMescroll的downCallback */
	const downCallback = async (mescroll : any) => {
		page.value = 1
		pageSize.value = 10
		await getAlarmList()
		mescroll.endSuccess();
	}

	/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
	const upCallback = async (mescroll : any) => {
		page.value = mescroll.num
		pageSize.value = mescroll.size
		await getAlarmList()
		mescroll.endBySize(10, total.value);
	}
	const getAlarmListFilter = (e:any, time:any) => {
		if( time) {
			created_at.value = e
		}
		alarmList.value = []
		getMescroll().resetUpScroll();
		getMescroll().scrollTo(0)
	}
	// const handleConfirm = () => {
	// 	alarmList.value = []
	// 	getMescroll().resetUpScroll();
	// 	getMescroll().scrollTo(0)
	// }
	// const station_name_clear = () => {
	// 	alarmList.value = []
	// 	getMescroll().resetUpScroll();
	// 	getMescroll().scrollTo(0)
	// }
	const popup = ref<any>('')
	const curId = ref('')
	const curStationId = ref('')
	const addBreak = (id : any, station_id : any) => {
		curId.value = id
		curStationId.value = station_id
		popup.value.open('center')
	}
	const handle = async () => {
		const res : any = await request('api/v1/updateAlarmStatus?permission=updateAlarmStatus', { id: curId.value }, 'GET')
		if (res.code !== 1000) {
			uni.showToast({
				title: res.message,
				icon: 'error'
			})
		} else {
			uni.showToast({
				title: '处理成功',
			})
			popup.value.close()
			alarmList.value = []
			getMescroll().resetUpScroll();
			getMescroll().scrollTo(0)
		}
	}
	const handleBreakDown = async () => {
		const res : any = await request('api/v1/addBreakDown?permission=addFault', { alarm_id: curId.value, station_id: curStationId.value }, 'POST')
		if (res.code !== 1000) {
			uni.showToast({
				title: res.message,
				icon: 'error'
			})
		} else {
			uni.showToast({
				title: '操作成功',
			})
			popup.value.close()
			alarmList.value = []
			getMescroll().resetUpScroll();
			getMescroll().scrollTo(0)
		}
	}
	const goDetail = (id: any) => {
		uni.setStorageSync('breakdown_id', id);
		uni.switchTab({
			url: '/pages/hitch/hitch'
		})
	}
	const goStationBoard = (id:any) => {
		uni.navigateTo({
			url: `/subpkg/stationBoard/stationBoard?id=${id}`
		})
	}
</script>

<style scoped lang="scss">
	::v-deep .is-input-border {
		background-color: #ffffff !important;
		opacity: 0.9;
		border: 1rpx solid #fff !important;
		border-radius: 40rpx;
	}

	::v-deep .uni-date-x--border {
		border: none;
	}

	::v-deep .uni-date-x {
		border-radius: 48rpx;
	}

	::v-deep .uni-date-x .icon-calendar {
		padding-left: 10rpx;
	}

	::v-deep .uni-select {
		border: none;
		font-size: 24rpx;
		// border: 1px solid #000;
	}

	::v-deep .uni-date__x-input {
		font-size: 24rpx !important;
		height: unset !important;
		line-height: unset !important;
		text-indent: 10rpx;
	}

	::v-deep .uni-icons {
		font-size: 36rpx !important;
	}

	.popup_content {
		width: 70vw;
		height: 250rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;

		.popupTitle {
			font-size: 36rpx;
			color: #303133;
		}

		.popupText {
			color: #606266;
			font-size: 28rpx;
			height: 50rpx;
		}

		.popupBtn {}
	}

	.searchFixed {
		padding: 0 32rpx;
		height: 170rpx;
		// border: 1px solid #000;
		background-color: #F6F6F6;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 999;

		.search {
			height: 74rpx;
		}

		.filter {
			height: 64rpx;
			background-color: #ffffff;
			border-radius: 48rpx;

			.filterItem {
				font-size: 24rpx;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: 0;
					height: 50%;
					border-left: 1px solid #DBDBDE;
				}

				&:last-child {
					&::after {
						border-left: none;
					}
				}
			}
		}
	}

	.content {
		margin-top: 170rpx;
		padding: 32rpx;
		background-color: #F6F6F6;
		min-height: calc(100vh - 170rpx);

		.alarmItem {
			height: 265rpx;
			padding: 20rpx 30rpx;
			box-shadow: 0px 3px 6px rgba(149, 149, 149, 0.16);
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 28rpx;

			.itemTop {
				border-bottom: 1px solid #E3F1F0;
				padding-bottom: 8rpx;

				.alarmName {
					.name {
						color: #484848;
						font-size: 22rpx;
						font-weight: bold;
					}

					.time {
						color: #8E8E93;
						font-size: 20rpx;
						margin-top: 7rpx;
					}
				}
				
				.alarmStatus {
					width: 76rpx;
					font-size: 22rpx;
					height: 36rpx;
					border-radius: 16rpx;
					background: rgba(254, 152, 5, 0.39);
					font-weight: bold;
					color: #FE9805;
				}

				.tishi {
					background: rgba(0, 206, 234, 0.39);
					color: #00CEEA;
				}

				.yiban {
					background: #FEFBE3;
					color: #F5C400;
				}

				.jinji {
					background: rgba(217, 70, 61, 0.39);
					color: #d9463d;
				}
			}

			.alarmDesc {
				font-size: 28rpx;
				color: #151516;
				font-weight: bold;
				margin: 10rpx 0;
				line-height: 1.5em;
				height: 80rpx;
			}

			.alarmHandle {
				color: #3665FF;
				font-size: 22rpx;

				.handleTime {
					font-weight: bold;
				}

				.handle {
					.handleName {
						font-weight: bold;
					}

					.handleBtn {
						margin-left: 30rpx;
						color: #ffffff;
						border-radius: 20rpx;
						background: #F55959;
						font-size: 22rpx;
					}

					.disabled {
						background: #ddd;
						border-color: #ddd;
					}

					.handleBtn1 {
						margin-left: 30rpx;
						color: #ffffff;
						border-radius: 20rpx;
						// background: #F55959;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>